<template>
    <!-- type控制显示，info控制内容 -->
    <div v-show="type != 'none'" id="popupBox">
        <div v-show="type === 'pointInfo'" class="ol-popup">
            <label class="ol-popup-closer" @click="close">x</label>
            <div class="popup-content">
                <div class="popup-content-item">
                    <div class="item-left">地点：</div>
                    <div class="item-right">{{ info.name }}</div>
                </div>
                <!-- <div class="popup-content-item">
                    <div class="item-left">地点：</div>
                    <div class="item-right">{{ info.name }}</div>
                </div>
                <div class="popup-content-item">
                    <div class="item-left">地点：</div>
                    <div class="item-right">{{ info.name }}</div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { useMapStoreHook } from '@/store/map';

// 初始化map
const mapStore = useMapStoreHook();
const { olMap, type, info } = storeToRefs(mapStore);

import Overlay from 'ol/Overlay';

//监测olMap是否加载，加载完成后添加弹窗
watch(olMap, (newVal) => {
    if (newVal) {
        addOverlay();
    }
});

//关闭弹窗，移除信息
const close = () => {
    mapStore.setType('none');
    mapStore.setInfo({});
};

let overlay = ref(null);
const addOverlay = () => {
    overlay.value = olMap.value.overlay.setOverlay(document.getElementById('popupBox'), (feature) => {
        if (feature.pointInfo) {
            mapStore.setType('pointInfo'); //设置弹窗类型，使对应弹窗出现
            mapStore.setInfo(feature.pointInfo); //设置弹窗信息
            overlay.value.setPosition(feature.values_.geometry.flatCoordinates);

            olMap.value.map.getView().animate({
                center: feature.values_.geometry.flatCoordinates,
                zoom: olMap.value.map.getView().getZoom(),
                duration: 500
            });
        } else if (feature.isCluster) {
            olMap.value.map.getView().animate({
                center: feature.values_.geometry.flatCoordinates,
                zoom: olMap.value.map.getView().getZoom() + 0.5,
                duration: 700
            });
        }
    });
};
</script>

<style lang="less" scoped>
.ol-popup {
    position: absolute;
    transform: translate(-50%, calc(-100% - 16px));
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));

    background: var(--theme-bg);
    padding: var(--system-map-item-padding);
    border-radius: var(--system-map-item-radius);

    /* overflow: hidden; */

    .title {
        background-color: #325c7d;
        height: 32px;
        line-height: 32px;
        position: relative;
        padding-left: 15px;
        color: #ffffff;
    }

    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 0.7vw;
        right: 0.2vw;
        font-size: 1.1vw;
        color: var(--theme-text1);
        cursor: pointer;
        transform: translate(-50%, -50%);
    }

    .popup-content {
        display: flex;
        flex-direction: column;
        /*设置为垂直方向*/
        align-items: center;
        gap: 0.8vh;
        padding: 20px;

        .popup-content-item {
            display: flex;
            align-items: center;

            .item-left {
                width: 5vw;
                display: flex;
                align-items: center;
                /*上下居中*/
                // justify-content: end;
                font-size: 20px;
                color: var(--theme-text1);
            }

            .item-right {
                width: 10vw;
                display: flex;
                align-items: center;
                /*上下居中*/
                // justify-content: start;
                font-size: 20px;
                color: var(--theme-text1);
            }
        }
    }
}

.ol-popup:after {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: var(--theme-bg);
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}
</style>
